<script setup lang="ts">
  import { ElDivider, ElMessageBox, TableInstance } from 'element-plus'
  import { h, PropType, ref } from 'vue'
  import { useGoodWarrantyPolicyListDelete } from '@/services/pages/good/warrantyPolicy'
  import infoTip from '@/config/info-tip'
  import { HMessage, HMessageBox } from '@/components/common/message'
  import { useRouter } from 'vue-router'

  const { warrantyPolicyListDelete } = useGoodWarrantyPolicyListDelete()

  defineOptions({
    name: 'TableWarrantyPolicy',
  })

  const emits = defineEmits<{
    (e: 'update'): void
  }>()

  const props = defineProps({
    warrantyPolicyList: {
      type: Array as PropType<Array<GoodWarrantyPolicy>>,
      required: true,
    },
  })

  // 全局路由对象
  const router = useRouter()

  // 选中的保修政策列表
  const selectedWarrantyPolicyIds = ref<Array<string>>([])

  // 间距组件的间隔符
  const spacer = h(ElDivider, {
    direction: 'vertical',
    style: 'display: flex; align-items: center;',
  })

  // 表格组件实例
  const tableInstance = ref<TableInstance | null>(null)

  /**
   * 删除保修政策
   * @param {GoodWarrantyPolicy} goodWarrantyPolicy - 保修政策对象
   */
  const handleDelete = async (goodWarrantyPolicy: GoodWarrantyPolicy) => {
    if (tableInstance.value) {
      tableInstance.value.clearSelection()
      tableInstance.value.toggleRowSelection(goodWarrantyPolicy, true)
      ElMessageBox({
        title: '提示',
        showCancelButton: true,
        cancelButtonText: '取消',
        type: 'error',
        message: infoTip.good.warrantyPolicy.deleteById,
        async beforeClose(action, instance, done) {
          if (['close', 'cancel'].includes(action)) {
            done()
          }

          if (action === 'confirm') {
            instance.confirmButtonLoading = true
            instance.cancelButtonLoading = true
            const res = await warrantyPolicyListDelete(selectedWarrantyPolicyIds.value)
            instance.confirmButtonLoading = false
            instance.cancelButtonLoading = false
            if (res.code === 20000) {
              HMessage.success(infoTip.good.warrantyPolicy.deleteSuccess)
              done()
              emits('update')
              return
            }

            HMessageBox.error(infoTip.good.warrantyPolicy[res.code] || res.message)
          }
        },
      })
    }
  }

  /**
   * 选项更新事件
   * @param {Array<GoodWarrantyPolicy>} selection - 保修政策选择列表
   */
  const handleSelectionChange = (selection: Array<GoodWarrantyPolicy>) => {
    selectedWarrantyPolicyIds.value = selection.map((item) => item.id)
  }

  /**
   * 编辑保修政策
   * @param {string} warrantyPolicyId - 保修政策id
   */
  const handleEdit = (warrantyPolicyId: string) => {
    router.push({ path: `/commodity/warranty/policy/update/${warrantyPolicyId}` })
  }

  defineExpose({
    selectedWarrantyPolicyIds,
  })
</script>

<template>
  <div class="table-warranty-policy">
    <el-table
      ref="tableInstance"
      :border="true"
      height="100%"
      :data="props.warrantyPolicyList"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="50" fixed="left" :align="'center'"></el-table-column>
      <el-table-column
        label="序号"
        type="index"
        width="50"
        fixed="left"
        :align="'center'"
      ></el-table-column>
      <el-table-column label="保修政策名称" width="160" prop="name" show-overflow-tooltip>
        <template #default="{ row }">
          <h-link @click="handleEdit(row.id)">{{ row.name }}</h-link>
        </template>
      </el-table-column>
      <el-table-column label="关联产品分类" width="160" show-overflow-tooltip>
        <template #default="{ row }">
          {{ row.goodsTypes.join('、') }}
        </template>
      </el-table-column>
      <el-table-column label="移动端是否显示" width="120">
        <template #default="{ row }">
          {{ row.mobileShow ? '显示' : '隐藏' }}
        </template>
      </el-table-column>
      <el-table-column
        label="描述"
        min-width="140"
        prop="descr"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        label="创建时间"
        width="140"
        prop="createTime"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        label="更新时间"
        width="140"
        prop="updateTime"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column label="保修状态" width="80" fixed="right" :align="'center'">
        <template #default="{ row }">
          <div class="flex_justify_center">
            <h-status v-if="row.status" type="info">禁用</h-status>
            <h-status v-else>启用</h-status>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="100">
        <template #default="{ row }">
          <el-space :size="0" :spacer="spacer">
            <h-link @click="handleEdit(row.id)">编辑</h-link>
            <h-link type="error" @click="handleDelete(row)">删除</h-link>
          </el-space>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<style scoped lang="scss"></style>
